<template>
  <div class="usds">
    <div class="tip" v-if="trad.b.name === 'CUSD'">
      <p>{{$t('jy.cusd1')}}</p>
      <p>{{$t('jy.cusd2')}}</p>
    </div>
    <div class="tip" v-else-if="trad.b.name === 'EUSD'">
      <p>{{$t('jy.eusd1')}}</p>
      <p>{{$t('jy.eusd2')}}</p>
    </div>
    <div class="tip" v-else-if="trad.b.name === 'ZIG'">
      <p>{{$t('jy.zig1')}}</p>
    </div>
    <div class="tip" v-else-if="trad.b.name === 'USDE'">
      <p>{{$t('jy.usde1')}}</p>
    </div>
    <div class="tip" v-else-if="trad.b.name === 'PAXE'">
      <p>{{$t('jy.paxe1')}}</p>
      <p>{{$t('jy.paxe2')}}</p>
    </div>
    <div class="tip" v-else-if="trad.b.name === 'USN'">
      <p>{{$t('jy.usn1')}}</p>
      <p>{{$t('jy.usn2')}}</p>
      <p>{{$t('jy.usn3')}}</p>
      <p>{{$t('jy.usn4')}}</p>
    </div>
    <div class="tip" v-else-if="trad.b.name === 'USDT'">
      <p>{{$t('jy.usdt1')}}</p>
      <!-- <p>{{$t('jy.usdt2')}}</p> -->
    </div>
    <div class="tip" v-else>
      <p>{{$t('jy.eosdt1')}}</p>
    </div>
    <div class="usdsList flex">
      <!-- 最大发行量 -->
      <div class="usdsCont">
        <div class="font999">{{$t('jy.faxzl')}}</div>
        <div class="cont">
          <a class="data"
            v-if="chain === 'eos'"
            :href="`${getChainHref('eos')}/tokens/${trad.b.name}-eos-${trad.b.code}`"
            target="_blank">
            {{coinInfo.publishCount | numeralFormat}}
          </a>
          <span v-else>{{coinInfo.publishCount | numeralFormat}}</span>
        </div>
      </div>
      <!-- 当前发行量 -->
      <div class="usdsCont">
        <div class="font999">{{$t('jy.liutongzl')}}</div>
        <div class="cont">
          <a class="data"
            v-if="chain === 'eos'"
            :href="`${getChainHref('eos')}/tokens/${trad.b.name}-eos-${trad.b.code}`"
            target="_blank">
            {{coinInfo.circulateCount | numeralFormat}}
          </a>
          <span v-else>{{coinInfo.circulateCount | numeralFormat}}</span>
        </div>
      </div>
    </div>
    <div class="usdsList flex">
      <!-- 合约名称 -->
      <div class="usdsCont">
        <div class="font999">{{$t('jy.heyuename')}}</div>
        <div class="cont">
          <a class="data" @click="handleToContract(coinInfo.contract)">
            {{coinInfo.contract || '-'}}
          </a>
        </div>
      </div>
      <!-- 官网 -->
      <div class="usdsCont">
        <div class="font999">{{$t('jy.guangw')}}</div>
        <div class="cont">
          <a :href="coinInfo.website" class="data" target="_blank" v-if="coinInfo.website">{{coinInfo.website || '-'}}</a>
          <span v-else>{{coinInfo.website || '-'}}</span>
        </div>
      </div>
    </div>
    <a :href="toContractHref" target="_blank" ref="toContractHref" class="hidden"></a>
  </div>
</template>

<script>
import axios from 'axios';
import { GetChainHref } from '@/utils/validate';

export default {
  name: 'usds', // 关于usds介绍
  data() {
    return {
      toContractHref: '', // 跳转到合约地址
      coinInfo: '',
    }
  },
  components: {},
  props: {
    usdsVisible: Boolean,
    trad: Object,
    chain: String
  },
  watch: {
    usdsVisible: function change(val) {
      if (val) {
        this.coinInfo = this.trad.valuationCoinInfo;
        this.handleGetData();
      }
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.coinInfo = this.trad.valuationCoinInfo;
    this.handleGetData();
  },
  beforeDestroy() {},
  methods: {
    handleGetData() {
      const valuationCoinInfo = this.coinInfo;
      if (!valuationCoinInfo.publishCount || !valuationCoinInfo.circulateCount) {
        // 获取币种发行量
        let nodeobj = null;
        const nodeChecked = this.$store.state.app.nodeChecked;
        nodeobj = nodeChecked[this.trad.baseChain];
        const kip = nodeobj.url;
        const params = {
          code: valuationCoinInfo.contract,
          symbol: this.trad.b.name,
        };
        axios.post(`${kip}/v1/chain/get_currency_stats`, params, {
          headers: {
            'Content-Type': 'text/plain;charset=UTF-8',
          }
        }).then((result) => {
          // this.cionLoading = false;
          if (result.status === 200) {
            const res = result.data;
            this.coinInfo.publishCount = parseInt(res[params.symbol].max_supply, 10) || '';
            this.coinInfo.circulateCount = parseInt(res[params.symbol].supply, 10) || '';
          }
        }).catch(() => {
          // this.cionLoading = false;
          this.coinInfo.publishCount = '';
          this.coinInfo.circulateCount = '';
        })
      }
    },
    // 前往合同 action -- 合约名
    handleToContract(action) {
      this.toContractHref = `${GetChainHref(this.chain)}/account/${action}`;
      if (this.chain === 'enu' || this.chain === 'fibos') {
        this.toContractHref = `${GetChainHref(this.chain)}/contracts/${action}`;
      }
      this.$nextTick(() => {
        this.$refs.toContractHref.click();
      });
    },
    getChainHref(chain) {
      return GetChainHref(chain)
    }
  },
}
</script>
<style lang="scss" scoped>
.usds {
  padding: 0 10px;

  .tip {
    line-height: 24px;
    margin-bottom: 15px;
  }

  .usdsList {
    .usdsCont {
      flex: 1;
      margin-top: 5px;

      .font999 {
        color: #999;
      }

      .cont {
        margin-top: 5px;
        font-size: 16px;
      }
    }
  }
}
</style>
